<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="申请类型" prop="productType" >
        <el-select v-model="queryParams.productType" placeholder="请选择申请类型" clearable >
          <el-option :label="item.label" :value="item.value" v-for="item in productTypes"/>
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态" prop="applyState" >
        <el-select v-model="queryParams.applyState" placeholder="请选择申请类型" clearable >
          <el-option :label="item.label" :value="item.value" v-for="item in applyStates"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" >
        <el-date-picker
          v-model="queryParams.startTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" >
        <el-date-picker
          v-model="queryParams.endTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="installmentList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="申请合同编号" align="center" prop="applyOrderNo" />
      <el-table-column label="贷款信息" align="center" prop="loanMessage" />
      <el-table-column label="申请类型" align="center" prop="jrProductType">
        <template slot-scope="scope">
          {{scope.row.jrProductType == 1 ? '租房分期' : scope.row.jrProductType == 2 ? '收房贷' : '应收租约保理'}}
        </template>
      </el-table-column>
      <el-table-column label="借款金额" align="center" prop="loanAmount" />
      <el-table-column label="借款期限" align="center">
        <template slot-scope="scope">
          {{scope.row.monthLimit}}个月
        </template>
      </el-table-column>
      <el-table-column label="申请日期" align="center" prop="createTime" />
      <el-table-column label="资金方" align="center" prop="companyName" />
      <el-table-column label="申请状态" align="center">
        <template slot-scope="scope">
          {{scope.row.applyState == 1 ? '申请中（待审核）' : scope.row.applyState == 2 ? '初审通过' : scope.row.applyState == 3 ? '初审不通过' : scope.row.applyState == 4 ? '复审通过' : '复审不通过'}}
        </template>
      </el-table-column>
      <el-table-column label="驳回原因" align="center" prop="auditMemo" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-if="scope.row.applyState == 1"
                     @click="toDetail(scope.row.id,scope.row.jrProductType,scope.row.applyState)">审核(去初审)
          </el-button>
          <el-button type="primary" size="mini" v-if="scope.row.applyState == 2"
                     @click="toDetail(scope.row.id,scope.row.jrProductType,scope.row.applyState)">审核（去复审）
          </el-button>
          <el-button type="primary" size="mini" v-if="scope.row.applyState == 3"
                     @click="toDetail(scope.row.id,scope.row.jrProductType,scope.row.applyState)">查看（初审不过）
          </el-button>
          <el-button type="primary" size="mini" v-if="scope.row.applyState == 4"
                     @click="toDetail(scope.row.id,scope.row.jrProductType,scope.row.applyState)">查看（复审通过）
          </el-button>
          <el-button type="primary" size="mini" v-if="scope.row.applyState == 5"
                     @click="toDetail(scope.row.id,scope.row.jrProductType,scope.row.applyState)">查看（复审不通过）
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 修改融资申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-row>
        <h1>申请主体信息</h1>
        <el-divider></el-divider>
        <el-col :span="10">
          <div>
            <p>公寓名称:{{business.name}}</p>
            <p>公司名称：{{business.name}} </p>
            <p>手机号：{{contract.signUserMobile}}</p>
            <p>法人姓名：{{business.corporation}}</p>
            <p>公司地址：{{business.address}}</p>
            <p>账户：{{contract.bankCard}}</p>
            <p>法人身份证：
              <el-image v-if="business.certPicture" style="width: 100px; height: 100px" :src="business.certPicture"></el-image>
              <el-image v-if="business.certPicture2" style="width: 100px; height: 100px" :src="business.certPicture2"></el-image>
              <el-image v-if="business.certPicture3" style="width: 100px; height: 100px" :src="business.certPicture3"></el-image>
            </p>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <p >类型：{{business.type==1?'个人职业房东':'公司化公寓'}}</p>
            <p>联系人：{{business.name}}</p>
            <p>申请时间：{{contract.createTime}}</p>
            <p>法人身份证：{{business.certNum}}</p>
            <p>账户类型：{{contract.accountType==1?'对公账户':'对私账户'}}</p>
            <p>开户行：{{contract.bankOpen}}</p>
          </div>
        </el-col>
      </el-row>

<!--      租房分期 详细信息-->
      <el-row v-if="jrProductType==1">
        <h1>租房分期详细信息</h1>
        <el-divider></el-divider>
        <el-col :span="10">
          <div>
            <p>租客姓名:{{contract.tenantName}}</p>
            <p>租客手机号：{{contract.tenantPhone}} </p>
            <p>月租金：{{contract.monthRent}}元</p>
            <p>租约起始时期：{{contract.startDate}}</p>
            <p>还款周期：1个月</p>
            <p>服务费：{{rent.serCharge}}</p>
            <p>待收租金合计：{{rent.reLeaseCount}}</p>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <p>租客身份证号：{{contract.tenantCardNo}}</p>
            <p>承租房间：{{contract.roomName}}</p>
            <p>押金：{{contract.deposit}}元</p>
            <p>租约终止时期：{{contract.endDate}}</p>
            <p>还款账期：{{rent.monthLimit}}个月</p>
            <p>利息：{{rent.inInterestCount}}</p>
          </div>
        </el-col>
      </el-row>

      <!--      收房贷 详细信息-->
      <el-row v-if="jrProductType==2">
        <h1>租房分期详细信息</h1>
        <el-divider></el-divider>
        <el-col :span="10">
          <div>
            <p>业主姓名:{{contract.ownerName}}</p>
            <p>业主手机号：{{contract.ownerMobile}} </p>
            <p>业主开户行：{{contract.bankOpen}} </p>
            <p>借款金额：{{jrSfLoan.reLeaseCount}}元</p>
            <p>一次性服务费：{{jrSfLoan.serCharge}}元（发放金额的{{jrSfLoan.serviceFee}}%）</p>
            <p>租约起始时期：{{contract.leaseStartTime}}</p>
            <p>周期还款金额：{{jrSfLoan.rpAmountCount/jrSfLoan.monthLimit}}元</p>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <p>业主身份证号：{{contract.ownerIdCard}}</p>
            <p>业主银行卡号：{{contract.bankCard}}</p>
            <p>租金合计：{{jrSfLoan.reLeaseCount}}元</p>
            <p>贷款利息：{{jrSfLoan.agInterestRate}}</p>
            <p>还款周期：{{jrSfLoan.monthLimit}}个月</p>
            <p>租约中止时期：1个月</p>
            <p>还款账期：{{jrSfLoan.monthLimit}}</p>
          </div>
        </el-col>
      </el-row>

      <!--      租约保理 详细信息-->
      <el-row v-if="jrProductType==3">
        <h1>租约保理详细信息</h1>
        <el-divider></el-divider>

        <el-table
          :data="factorList"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            label="承租房间"
            width="180">
            {{contract.roomName}}
          </el-table-column>
          <el-table-column
            label="租客名称">
            {{contract.tenantName}}
          </el-table-column>
          <el-table-column
            label="租客手机号">
            {{contract.tenantPhone}}
          </el-table-column>
          <el-table-column
            label="月租金">
            {{contract.monthRent}}元
          </el-table-column>
          <el-table-column
            label="借款周期">
            {{factor.monthLimit}}
          </el-table-column>
          <el-table-column
            label="保理利息">
            {{factorDetail.factoringInterest}}
          </el-table-column>
          <el-table-column
            label="租期">
            {{contract.startDate}}至{{contract.endDate}}
          </el-table-column>
          <el-table-column
            label="操作">
            <el-button type="primary" size="mini" @click="checking">查看</el-button>
          </el-table-column>
        </el-table>
        <!--          租约保理基本信息-->
        <el-dialog title="基本信息" :visible.sync="open2">
          <el-row>
            <el-col :span="10">
              <div>
                <p>租客姓名:{{contract.tenantName}}</p>
                <p>租客手机号：{{contract.tenantPhone}} </p>
                <p>应收保理金额：{{factor.loanMmount}}元</p>
                <p>保理利息：{{factorDetail.factoringInterest}}元({{factor.rate}}%)</p>
                <p>实收保理金额：{{factor.factoringTrueMoney}}元({{factor.rate}}%)</p>
                <p>租约起始时期：{{contract.startDate}}</p>
                <p>还款周期：1个月</p>
                <p>周期还款金额：{{contract.monthRent}}个月</p>
              </div>
            </el-col>

            <el-col :span="10">
              <div>
                <p>租客身份证号：{{contract.tenantCardNo}}</p>
                <p>待收租金合计：{{factor.rentMoney}}元</p>
                <p>保理授信比例：{{factorDetail.factoringCreditMoney}}%</p>
                <p>一次性服务费：{{factorDetail.serviceFee}}元</p>
                <p>退款金额：{{factorDetail.serviceFee}}元</p>
                <p>租约终止时期：{{contract.endDate}}元</p>
                <p>还款账期：{{factor.monthLimit}}元</p>
                <p>尾款退款时间：{{contract.endDate}}元</p>
              </div>
            </el-col>

          </el-row>
        </el-dialog>
      </el-row>
      <el-row v-if="jrProductType==3">
        <el-col :span="10">
          <div>
            <p>应收租约合计:{{factor.rentMoney}}元</p>
            <p>服务费：{{factor.serviceMoney}}元</p>
            <p>实收保理额度合计：{{factor.factoringTrueMoney}}元</p>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <p>保理授信金额：{{factorDetail.factoringCreditMoney}}</p>
            <p>保理利息：{{factorDetail.factoringInterest}}</p>
          </div>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <div v-if="applyState==1">
          <el-button type="primary" @click="submitReview(2)">初审通过</el-button>
          <el-button type="primary" @click="submitReview(3)">初审不通过</el-button>
        </div>
        <div v-if="applyState==2">
          <el-button type="primary" @click="submitReview(4)">复审通过</el-button>
          <el-button type="primary" @click="submitReview(5)">复审不通过</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list,getApplyDetail,getApplyDetail2,getApplyDetail3,review } from "@/api/financial/applyReview";

export default {
  name: "applyReview",
  components: {
  },
  data() {
    return {
      // 所有申请类型：
      productTypes:[
        {label:'租房分期',value:1},
        {label:'收房贷',value:2},
        {label:'应收租约保理',value:3}
      ],
      // 所有申请类型：
      applyStates:[
        {label:'待审核',value:1},
        {label:'初审通过(待复审)',value:2},
        {label:'初审不通过',value:3},
        {label:'复审通过',value:4},
        {label:'复审不通过',value:5}
      ],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 融资申请查询表格数据
      installmentList: [],
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    //  修改表单
      form:{},
    //  审核对话框 标识
      // 是否显示弹出层
      open: false,
      open2:false,
    //  申请主体信息
      business:{},
    //  金融产品类型
      jrProductType:'',
    //  申请状态
      applyState:'',
    //  出房,收房合同
      contract:{},
    //  租房分期
      rent:{},
    //  租约保理
      factor:{},
      factorDetail:{},
      factorList:[],
    //  租房贷
      jrSfLoan:{},

    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询融资申请查询列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
        this.installmentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
  //  查看，审核
    toDetail(id,jrProductType,applyState){
      this.open=true;
      this.jrProductType=jrProductType;
      this.applyState=applyState;
      console.log("jrProductType",jrProductType);
      //租房分期申请查询
      if(jrProductType==1){
        getApplyDetail(id).then(response=>{
          this.business=response.data.business;
          this.contract=response.data.cfContract;
          this.rent=response.data.rent;
          console.log(response.data);
        })
      }
      //租房贷申请查询
      else if(jrProductType==2){
        getApplyDetail2(id).then(response=>{
          this.business=response.data.business;
          this.contract=response.data.sfContract;
          this.jrSfLoan=response.data.jrSfLoan;
          console.log(response.data);
        })
      }
      //租约保理申请查询
      else{
        this.jrProductType=3;
        getApplyDetail3(id).then(response=>{
          this.business=response.data.business;
          this.contract=response.data.cfContract;
          this.factor=response.data.factor;
          this.factorDetail=response.data.factorDetail;
          this.factorList=[
            {
              id:1,
              /*roomName:this.contract.roomName,
              tenantName:this.contract.tenantName,
              tenantPhone:this.contract.tenantPhone,
              monthRent:this.contract.monthRent,
              factoringInterest:this.factorDetail.factoringInterest,
              startDate:this.contract.startDate,
              endDate:this.contract.endDate,*/
            },
          ]
          console.log(response.data);
        })
      }
    },
    checking() {
      this.open2=true;
    },
  //  审核结果
    submitReview(applyState) {
      //租房申请审核
      if(this.jrProductType==1){
        review(this.rent.id,this.jrProductType,applyState).then(response=>{
          if(response.code==200){
            location.reload();
          }
        })
      }
      //租房贷
      if(this.jrProductType==2){
        review(this.jrSfLoan.id,this.jrProductType,applyState).then(response=>{
          if(response.code==200){
            location.reload();
          }
        })
      }
    //  租约保理
      if(this.jrProductType==3){
        review(this.factor.id,this.jrProductType,applyState).then(response=>{
          if(response.code==200){
            location.reload();
          }
        })
      }
    }
  }
};
</script>
